import React, { Component, createRef} from 'react'
// import { Button } from '_antd@4.15.1@antd'
import { Button, Form, Input, Select, Row, Col} from 'antd'
import {userDeptApi} from '../../apis/userApi'
//const form = Form.useForm()  仅在函数组件中使用

class UserEdit extends Component {
state = {
    formNode: createRef(),
    id:'',
    name:'',
    password:'',
    sex:'',
    dept: '',
    duties: '',
    deptList: [],
    dutiesList: []
}

async componentDidMount() {
    let result = await userDeptApi()
    console.log(result)
    if(result.code !== 200)  return
    this.setState({deptList: result.data})
}

 submitEvt(){

   this.state.formNode.current.validateFields()
        .then(()=>{
            console.log("sucess")
        })
        .catch(()=>{
            console.log('error')
        })
 }


    render() {
        return (
            <div className="content-container">
                <header>
                    <Button type="primary" onClick={this.submitEvt.bind(this)}>保存</Button>
                    <Button type="primary">返回</Button>
                </header>
                <article>
                    <Form labelCol={{style: {width:'96px'}}} ref={this.state.formNode}>
                        <Row>
                            <Col span={8} xl={8} xxl={6}>
                                <Form.Item name="id" label="用户编码" rules={[{require: true, message:'用户编码必须输入'}]}>
                                    <Input value={this.state.id} onChange={e => {this.setState({id: e.target.value})}} />
                                </Form.Item>
                            </Col>
                            <Col span={8} xl={8} xxl={6}>
                                <Form.Item name="name" label="用户姓名" rules={[{require: true, message:'用户姓名必须输入'}]}>
                                    <Input value={this.state.name} onChange={e => {this.setState({name: e.target.value})}} />
                                </Form.Item>
                            </Col>
                            <Col span={8} xl={8} xxl={6}>
                                <Form.Item name="password" label="用户密码" rules={[{require: true, message:'用户密码必须输入'}]}>
                                    <Input value={this.state.password} onChange={e => {this.setState({id: e.target.value})}} />
                                </Form.Item>
                            </Col>
                            <Col span={8} xl={8} xxl={6}>
                                <Form.Item name="sex" label="性别">
                                    <Select value={this.state.sex} onChange={sex => {this.setState({sex})}}>
                                        <Select.Option value="男">男</Select.Option>
                                        <Select.Option value="女">女</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>  
                            <Col span={8} xl={8} xxl={6}>
                                <Form.Item name="dept" label="部门">
                                    <Select value={this.state.dept} onChange={dept => {
                                        this.setState({
                                            dept,
                                            dutiesList: this.state.deptList.find(oo => oo.name === dept).list,
                                            duties:''
                                        },() =>{
                                            this.state.formNode.current.setFieldsValue({
                                                duties:''
                                            })
                                        })
                                    }}>
                                        {
                                            this.state.deptList.map( it => {
                                                return <Select.Option key={it.name} value={it.name}>{it.name}</Select.Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8} xl={8} xxl={6}>
                            {/*在这个 组件中用了name属性 state的改变不会影响 组件显示内容*/}
                                <Form.Item name="duties" label="职位">
                                    <Select value={this.state.duties} onChange={duties => {this.setState({duties})}}>
                                        {
                                            this.state.dutiesList.map( it => {
                                                return <Select.Option key={it} value={it}>{it}</Select.Option>
                                            })  
                                        }
                                        
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </article>
            </div>
        )
    }
}
export default UserEdit